<template>
	<view class="uni_box home">
		<navbar title='每日分享' :yin="true">
			<!-- <view class="hright" slot="right" @click="getrightClick">
				<image class="share" src="/static/img/share.png" mode="" />
			</view> -->
		</navbar>
		<view class="content">
			<view class="sone">
				<image class="tou" src="/static/img/tou.png" mode="" />
				<view class="xright">
					<view class="xone">
						<text class="name">律小狮</text>
						<text class="rtime">{{info.created_at}}发布</text>
					</view>
					<view class="xone titem">
						<view class="guan">官方</view>
						<view class="yue">
							<image class="icon_gk" src="/static/img/icon_gk.png" mode="" />
							<text>{{info.see_number}}阅读</text>
						</view>
					</view>
				</view>
			</view>
			<view class="line"></view>
			<view class="xinxi">
				<u-parse :html="info.content" :tag-style="style"></u-parse>
				<image
				v-if="info.thumbnail"
					:src="info.thumbnail"
					mode="widthFix"
					style="width: 100%;margin-top: 30rpx;"
					@click="yulan(info.thumbnail)"
				/>
				<!-- <view class="xinview">
					<view class="xinitems">
						<image class="icon_pl" src="/static/img/icon_pl.png" mode="" />
						<text>{{info.see_number}}</text>
					</view>
					<view class="xinitems">
						<image class="icon_pl" src="/static/img/xins.png" mode="" />
						<text>{{ info.sort }}</text>
					</view>
				</view> -->
			</view>
			<view class="line"></view>
			<!-- <view class="plun">
				<text class="plname">评论</text>
				<view class="pllist">
					<view class="pitem" v-for="(item,index) in 10" :key="index">
						<view class="pone">
							<image class="tou" src="/static/img/tou.png" mode="" />
							<text class="pxian">77</text>
							<text class="ptime">2024-3-15  19:01:15 </text>
						</view>
						<view class="pcont">
							<text class="liname">哇！好厉害，真的好棒啊！！哇！好厉害，真的好棒啊！！哇！好厉害，真的好棒啊！！</text>
						</view>
					</view>
				</view>
			</view>

			<view class="botview">
				<view class="botleft">
					<image class="icon_pl_s" src="/static/img/icon_pl_s.png" mode="" />
					<u-input v-model="value" type="text" :border="false" placeholder="说点儿什么呗~"/>
				</view>
				<view class="botright">
					<image class="xins" src="/static/img/xins.png" mode="" />
					<text>77</text>
				</view>
			</view> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				content:'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX  XXXXXXXXXXXXXXXXXXXXXXX',
				style: {
						img: 'width:max-width:100%;height:auto;pointer-events: none;'
				},
				value:'',
				id:'',
				info:{}
			}
		},
		onLoad(option) {
			this.id = option.id
			this.getDetail()
		},
		onShow() {
		},
		methods: {
			async getDetail(){
				let res = await this.$u.api.newsinfo({
					id:this.id
				});
				this.info = res.info
			},
			getrightClick(){

			},
			yulan(img){
				let shuzu = []
				shuzu.push(img)
				uni.previewImage({
					current: img, // 当前显示图片的 http 链接
					urls: shuzu // 需要预览的图片 http 链接列表
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #fff;
	}
	.share{
		width: 48rpx;
		height: 48rpx;
	}
	.content{
		background-color: #fff;
		padding-bottom: 150rpx;
		.sone{
			padding: 30rpx;
			display: flex;
			flex-direction: row;
			.tou{
				margin-right: 10rpx;
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
			}
			.xright{
				display: flex;
				flex: 1;
				flex-direction: column;
				.xone{
					display: flex;
					flex-direction: row;
					align-items: center;
					.name{
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 30rpx;
						color: #333333;
					}
					.rtime{
						margin-left: auto;
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 24rpx;
						color: #999999;
					}

					.guan{
						background: rgba(62,101,229,0.1);
						border-radius: 5rpx;
						padding: 5rpx 12rpx;
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 18rpx;
						color: #3E65E5;
					}
					.yue{
						margin-left: auto;
						display: flex;
						flex-direction: row;
						align-items: center;
						.icon_gk{
							margin-right: 4rpx;
							width: 28rpx;
							height: 28rpx;
						}
						text{
							font-family: PingFang SC;
							font-weight: 500;
							font-size: 24rpx;
							color: #999999;
						}
					}
				}
				.titem{
					margin-top: 14rpx;
				}
			}
		}
		.line{
			height: 10rpx;
			background: #F5F5F5;
			position: relative;
		}
		.xinxi{
			padding: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #999999;
		}
		.xinview{
			display: flex;
			justify-content: flex-end;
			margin-top: 50rpx;
			.xinitems{
				display: flex;
				flex-direction: row;
				align-items: center;
				margin-left: 40rpx;
				.icon_pl{
					margin-right: 8rpx;
					width: 40rpx;
					height: 40rpx;
				}
				text{
					font-family: PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #666666;
				}
			}
		}
		.plun{
			padding: 30rpx;
			.plname{
				margin-bottom: 40rpx;
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 36rpx;
				color: #333333;
			}
			.pllist{
				.pitem{
					padding: 30rpx 0;
					border-bottom: 1rpx solid #EEEEEE;
					display: flex;
					flex-direction: column;
					.pone{
						display: flex;
						flex-direction: row;
						align-items: center;
						.tou{
							width: 58rpx;
							height: 58rpx;
							border-radius: 50%;
							margin-right: 15rpx;
						}
						.pxian{
							font-family: PingFang SC;
							font-weight: 500;
							font-size: 30rpx;
							color: #333333;
						}
						.ptime{
							margin-left: auto;
							font-family: PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #999999;
						}
					}
					.pcont{
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 24rpx;
						color: #666666;
						margin-top: 20rpx;
						.liname{
							font-family: PingFang SC;
							font-weight: 500;
							font-size: 24rpx;
							color: #666666;
						}
					}
				}
			}
		}
		.botview{
			height: 100rpx;
			position: fixed;
			width: 100%;
			bottom: 0;
			background: #FFFFFF;
			box-shadow: 0rpx -1rpx 0rpx 0rpx #eee;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 0 30rpx;
			.botleft{
				height: 68rpx;
				background: #F5F5F5;
				border-radius: 34rpx;
				// width: 70%;
				flex: 1;
				display: flex;
				align-items: center;
				padding: 0 30rpx;
				.icon_pl_s{
					width: 24rpx;
					height: 24rpx;
					margin-right: 14rpx;
				}

			}
			.botright{
				display: flex;
				flex-direction: row;
				align-items: center;
				margin-left: 50rpx;
				.xins{
					width: 40rpx;
					height: 37rpx;
					margin-right: 13rpx;
				}
				text{
					font-family: PingFang SC;
					font-weight: bold;
					font-size: 28rpx;
					color: #666666;
				}
			}
		}
	}
</style>
